<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title></title>
        <style>
        </style>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
       <div id="app">
           <p>初始值：{{message}}</p>
           <p>反转值_行内写法：{{message.split('').reverse().join()}}</p>
           <p>反转值_函数调用写法：{{reverseHanshu()}}</p>
           <p>反转值_计算属性写法：{{reverse}}</p>   <!--不能加括号，不加括号表示属性，加括号就变成了方法-->
       </div>
    </body>
</html>
<script>
    //1.创建vue实例
    let vm=new Vue({
        el:'#app',
        data:{
            message:'你好，世界！'
        },
        methods:{
            reverseHanshu(){
                return this.message.split('').reverse().join();
            }
        },
        computed:{// 适合于大量运算并且改变频率比较低的属性，因为他会有缓存，页面重新渲染时候计算属性不会改变
            //get方法
            reverse(){
                 return this.message.split('').reverse().join();
            }
        }
    })
</script>